<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:任务实例详情弹窗组件
* @fileName:InstanceDrawer.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-6
!-->

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
//引入详情信息组件
import InstanceInformation from "./drawercomponents/instance-information.vue";
//引入详情日志组件
import InstanceLog from "./drawercomponents/instance-log.vue";
//引入步骤度量组件
import InstanceStep from "./drawercomponents/instance-step.vue";
// 步骤度量分页
import { getCurrentInstance } from "vue";
import { showErrorMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;
//接收父组件传值
const props = defineProps({
  detailsParam: Object as any,
  drawerFunc: Function as any,
});
//详情数据
const listData = reactive({
  tableData: [],
  total: 0,
});

// 定义请求数据
let reqData = {
  groupId: "",
  keyword: "",
  status: "",
  page: 1,
};
//定义组件参数
const radio = ref("基本信息");

/**
 * @description:获取列表请求方法
 * @return void
 */
const reqTableList = () => {
  const res = proxy.$HTTP.get({
    url: `/task/instance/stepLog/${props.detailsParam.id}`,
  });
  res.then((res: any) => {
    if (res.isOk) {
      listData.tableData = res.data;
      listData.total = Number(res.data.total);
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};
onMounted(() => {
  // 初始化加载树形结构
  reqTableList();
});

/**
 * @description:传值方法
 * @param {any} label
 * @return void
 */
const changeRadio = (label: any) => {
  console.log("detailsParamlabel", label);
  props.drawerFunc(label);
};
</script>

<template>
  <div class="living-drawer">
    <div class="tabs-button">
      <el-radio-group v-model="radio" @change="changeRadio" fill="#5473e6">
        <el-radio-button label="基本信息" />
        <el-radio-button label="日志" />
        <el-radio-button label="步骤度量" />
      </el-radio-group>
    </div>
    <instance-information
      v-if="radio === '基本信息'"
      :informationParam="props.detailsParam"
    >
    </instance-information>
    <instance-log v-if="radio === '日志'" :logParam="props.detailsParam">
    </instance-log>
    <instance-step
      v-if="radio === '步骤度量'"
      :tableData="listData.tableData"
    ></instance-step>
  </div>
</template>

<style lang="scss" scoped>
.living-drawer {
  width: 100%;
  height: 100%;
  .tabs-button {
    width: 100%;
    .el-radio-button {
      margin-left: 12px;
      width: 80px;
      border: 1px solid #efefef;
      font-family: PingFang SC;
      font-weight: 700;
      :deep(.el-radio-button__inner) {
        width: 80px;
        height: 30px;
        border-radius: 0;
        text-align: center;
        font-family: PingFang SC;
        font-weight: 700;
        font-size: 14px;
        border: 0;
      }
    }
  }
}
</style>
